<template>
  <div class="box">
    <!-- 111 -->
    <!-- {{ item }} -->
    <!-- <template v-if="props.item.deptList.childList">
      <a-sub-menu :key="props.item.deptList.id">
        <template v-slot:title>
          <a-checkbox :value="item"
            ><span class="name1">{{ props.item.itemName }}</span></a-checkbox
          >
          <span class="name1">{{ props.item.itemName }}</span>
        </template>
        <SidebarItem v-for="(elem, key) of props.item.childList" :key="key" :item="elem" />
      </a-sub-menu>
    </template>
    <template v-else>
      <a-menu-item :key="props.item.deptList.id">
        <a-checkbox :value="item">{{ props.item.itemName }}</a-checkbox>
      </a-menu-item>
    </template>-->

    <template v-if="item.deptName">
      <a-sub-menu :key="item.id">
        <template v-slot:title
          ><a-checkbox :value="item.id" @click="onDeptNameChecked($event)" />
          <span style="margin-left: 10px" @click="onDeptName(item)"
            >{{ item.deptName }}
          </span></template
        >
      </a-sub-menu>
    </template>
    <template v-else-if="item.realName">
      <a-menu-item :key="item">
        <!-- <template v-slot:title> -->
        <a-checkbox :value="item.userId" @click="onRealNameChecked($event, item)">{{
          item.realName
        }}</a-checkbox>
        <!-- </template> -->
      </a-menu-item>
    </template>
    <!-- <div
      v-for="em1 of userList1"
      :key="em1.userId"
      style="display: flex; line-height: 30px; margin-bottom: 10px"
    >
      <a-checkbox value="3" style="margin-right: 10px" />
      <div style="width: 25px; height: 25px; margin-right: 10px">
        <img :src="em1.avatar" style="width: 100%; height: 100%; border-radius: 50%" />
      </div>

      <span style="color: #999999"> {{ em1.realName }}</span>
    </div> -->
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import {} from 'ant-design-vue';
// import SidebarItem from './index';

export default defineComponent({
  /** ****************引用的数据***********************/
  // components: {
  //   SidebarItem
  // },
  props: {
    item: Object
  },
  setup(props, context) {
    const userList = ref([]); // 成员数据
    // 点击部门
    function onDeptName(id) {
      context.emit('onDeptName', id);
    }
    // 点击人员
    function onRealName(id) {
      context.emit('onRealName', id);
    }

    // 选中多选
    function onRealNameChecked(e, item) {
      context.emit('onRealNameChecked', e, item);
    }
    // 勾选部门
    function onDeptNameChecked(e) {
      context.emit('onDeptNameChecked', e);
    }

    return { onDeptName, onRealName, onRealNameChecked, userList, onDeptNameChecked };
  }
});
</script>

<style lang="less" scoped>
// .box {
//   display: flex;
//   justify-content: flex-start;
//   width: 100%;
//   height: 50px;
// }
// .micro-dormitory-checkbox-wrapper {
//   line-height: 50px;
// }
</style>
